<template>
	<div>
		<table-com></table-com>
		<div id="myChart"></div>
	</div>
</template>

<script>
	
	import tableCom from '@/components/page/customer/com/common.vue'
	export default {
		components: {
			tableCom
		},
		data() {
			return {
				customer_id: '',
				myCharts: '',
				tableData: [],
				tableData2: [],
				tableColumns: [
					{ title: '姓名',  key: 'real_name', align: "center" },
					{ title: '性别',  key: 'gender', align: "center" },
					{ title: '年龄',  key: 'age', align: "center" }
				]
			}
		},
		created(){
			// 传值  
			this.tableData2 = [this.$route.query.obj];
			this.customer_id = this.$route.params.id;
		},
		mounted(){
			this.getData();
			this.myChart();
		},
		methods: {  
			getData(){
//				/customer_monitor/GLU_list  API
				this.$http.get('/customer_monitor/GLU_list?customer_id=' + this.customer_id,{page:10000})
				.then(({data})=>{
					console.log(data)
					this.tableData = data.data.list.map((e)=>{
						//  时间戳转日期
						var date = new Date(e.testTime);
						let Y = date.getFullYear() + '-';
						let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
						let D = date.getDate();
						D = D < 10 ? '0' + date.getDate() : D
						e.testTime = Y + M + D
						return e
					})
					 // 将X轴日期遍历出来 加入新的数组
					var xData = [];
					this.tableData.forEach(e=>{
						xData.unshift(e.testTime)
					})
//					console.log(xData)
					//  类别一   空腹血糖
						var gluBlood = [];
						for(var j = 0; j < this.tableData.length; j++) {
							if(this.tableData[j].GLUCategory === '空腹血糖') { 
								gluBlood.unshift(this.tableData[j].GLU)
							}
						}
						//  类别二   餐后2小时
						var twoHour = [];
						for(var k = 0; k < this.tableData.length; k++) {
							if(this.tableData[k].GLUCategory === '餐后2小时') {  
								twoHour.unshift(this.tableData[k].GLU)
							}
						}
					
						//   先算出空腹血糖的长度  再加入餐后两小时的 数组
						var gulLenght = gluBlood.length;
						var hourLenght = new Array(gulLenght);
						for(var m=0;m<hourLenght.length;m++){
							twoHour.unshift(hourLenght[m])
						}
						//  类别三   随机血糖
						var randomBlood = [];
						for(var o=0;o<this.tableData.length;o++){
							if(this.tableData[o].GLUCategory === '随机血糖'){
								randomBlood.unshift(this.tableData[o].GLU)
							}
						}
						//  先算出餐后两小时的长度  再加入随机血糖的数组
						var newData = twoHour.length
						var randomArr = new Array(newData)
						for(var n=0;n<randomArr.length;n++){
							randomBlood.unshift(randomArr[n])
						}
//					console.log(this.tableData)
					this.myCharts.setOption({
						xAxis: [
							{data: xData} //将异步请求获取到的数据进行装载
						],
						series: [
							{ data: gluBlood },
							{ data: twoHour },
							{ data: randomBlood }
						]
					})
				})
				.catch((err)=>{
					console.log(err);
					this.$Notice.error({ title: "血糖数据详情获取失败！" });
				})
			},
			myChart(){
				let myChart = this.$echarts.init(document.getElementById('myChart'));  // 全局引用写法
				this.myCharts = myChart;
				//用于使chart自适应高度和宽度  
				window.onresize = function() {
					//重置容器高宽  
					myChart.resize();
				};
				var option = {
				    title : {
				        text: '血糖'
				    },
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				        data:['空腹血糖','餐后2小时','随机血糖']
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            magicType : {show: true, type: ['line', 'bar']},
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    xAxis : [
				        {
				            type : 'category',
				            name: '日期',
				            boundaryGap : false,
//				            data : ['周一','周二','周三','周四','周五','周六','周日']
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value',
				            name: 'mmol',
				            axisLabel : {
				                formatter: '{value}'
				            },
				            splitNumber: 0,
							boundaryGap: [0, 0.1], //   不要顶天立地-,
				        }
				    ],
				    series: [{
							name: '空腹血糖',
							type: 'line',
							//data: ['10'],
							symbol: 'circle',
//							color: '#0099ff',
//							symbolSize: 5
							//  拐点圆形的大小
							symbolSize: function(value,param){
								if(value >= 6.1 || value <= 3.9){
									return 7
								} else{
									return 5
								}
								
							},
							lineStyle: {
								color: '#0099ff'
							},
							itemStyle: {
								color: {
									type: 'linear',
									color: '#0099ff'
								},
								normal: {
									// 拐点颜色设置
									color:function(param){
										if (param.value >= 6.1 || param.value <= 3.9) {
								        	return 'red';
								    	}else {
											 return '#0099ff';
										}
									}
								}
							}
						},
						{
							name: '餐后2小时',
							type: 'line',
							//data:  twoHour,
							symbol: 'circle',
//							color: '#ffaa00',
//							symbolSize: 5
							symbolSize: function(value,param){
								if(value > 7.9){
									return 7
								} else{
									return 5
								}
								
							},
							lineStyle: {
								color: '#ffaa00'
							},
							itemStyle: {
								color: {
									type: 'linear',
									color: '#ffaa00'
								},
								normal: {
									// 拐点颜色设置
									color:function(param){
										if (param.value > 7.9) {
								        	return 'red';
								    	}else {
											 return '#ffaa00';
										}
									}
								}
							}
						},
						{
							name: '随机血糖',
							type: 'line',
							//data:  ['30'],
							symbol: 'circle',
//							color: '#039d56',
//							symbolSize: 5
							symbolSize: function(value,param){
								if(value >= 11.1){
									return 7
								} else{
									return 5
								}
								
							},
							lineStyle: {
								color: '#039d56'
							},
							itemStyle: {
								color: {
									type: 'linear',
									color: '#039d56'
								},
								normal: {
									// 拐点颜色设置
									color:function(param){
										if (param.value >= 11.1) {
								        	return 'red';
								    	}else {
											 return '#039d56';
										}
									}
								}
							}
						}

					]
				
				};
				myChart.setOption(option);
				                    
			}
		}
	}
</script>

<style scoped>
	
	#myChart{
		width: 100%;
		height: 700px;
	}
</style>